{include file="layout/header" /}

<script type="text/html" id="checkboxTpl">
    <!-- 这里的 checked 的状态只是演示 -->
    <input type="checkbox" name="is_visible" value="{{d.id}}" title="展示" lay-filter="lockDemo" {{ d.is_visible == 1 ? 'checked' : '' }}>
</script>

<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use(['element','table','jquery'], function(){
        var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
        var table = layui.table
            ,form = layui.form;
        var $ = layui.jquery;

        //向世界问个好
        //layer.msg('Hello yuexiaolei');

        table.render({
            elem: '#demo'
            , height: ''
            , cellMinWidth: 80
            , url: '/admin/nav/user' //数据接口
            , page: true //开启分页
            , toolbar:'default'
            , cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', title: 'ID', width: 100, align: 'center', sort: true, fixed: 'left'}
                , {
                    field: 'path_name',
                    title: '图片',
                    width: 200,
                    height: 200,
                    align: 'center',
                    templet: '<div><img src="{{ d.path_name}}" width="60px" height="50px"></div>'
                }
                , {field: 'is_visible', title: '是否展示', width: 110, templet: '#checkboxTpl', unresize: true}
                , {field: 'create_time', title: '添加时间', width: 177,align: 'center',}
                , {field: 'update_time', title: '修改时间', width: 177,align: 'center',}
                , {field: 'sort', title: '排序', width: 100, align: 'center', edit: 'text'}
                , {field: 'right', title: '操作', toolbar: '#barDemo', width: 170, align: 'center'}
            ]],
            done: function (res, curr, count) {
                hoverOpenImg();//显示大图
                $('table tr').on('click', function () {
                    $('table tr').css('background', '');
                    $(this).css('background', '<%=PropKit.use("config.properties").get("table_color")%>');
                });
            }
        });

        function hoverOpenImg(){
            var img_show = null; // tips提示
            $('td img').hover(function(){
                var kd=$(this).width();
                kd1=kd*3;          //图片放大倍数
                kd2=kd*3+30;       //图片放大倍数
                var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:"+kd1+"px;' />";
                img_show = layer.tips(img, this,{
                    tips:[2, 'rgba(41,41,41,.5)']
                    ,area: [kd2+'px']
                });
            },function(){
                layer.close(img_show);
            });
            $('td img').attr('style','max-width:70px;display:block!important');
        }

        //监听导航点击
        element.on('nav(demo)', function(elem){
            //console.log(elem)
            layer.msg(elem.text());
        });

        //监听锁定操作
        form.on('checkbox(lockDemo)', function(obj){
            $.ajax({
                url:"/admin/nav/fieldUpdate",
                data:{id:this.value,is_visible:obj.elem.checked},
                type:"post",
                success:function(data){
                    //console.log(data);
                    if(data.code == 1)
                    {
                        layer.msg('ok');
                    }else
                    {
                        layer.msg('no');
                    }
                }
            });
        });

        //监听工具条
        table.on('tool(demo)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                layer.msg('ID：'+ data.id + ' 的查看操作');
            } else if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                layer.alert('编辑行：<br>'+ JSON.stringify(data))
            }
        });

        //监听单元格编辑
        table.on('edit(test)', function(obj){
            var value = obj.value //得到修改后的值
                ,data = obj.data //得到所在行所有键值
                ,field = obj.field; //得到字段
            $.ajax({
                url:"/admin/nav/littleUpdate",
                data:{id:data.id,y:field,x:value},
                type:"post",
                success:function(res){
                    if(res.code ==  1)
                    {
                        layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
                    }else
                    {
                        layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更新失败 ');
                    }
                }
            });
            /* layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);*/
        });

        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            //console.log(checkStatus);
            if(layEvent === 'detail'){ //查看
                //do somehing
                layer.open({
                    type: 0,
                    anim:5,
                    title:'数据信息展示',
                    area:['450px','430px'],
                    content: 'id：'+obj.data.id+'<br/>'+'图片：<div><img src="'+ obj.data.path_name +'" width="200px" height="150px"></div>'+'<br/>'+'是否展示：'+obj.data.is_visible+'<br/>'+'排序：'+obj.data.sort+'<br/>'+'添加时间：'+obj.data.create_time+'<br/>'+'修改时间：'+obj.data.update_time+'<br/>'
                    //content:'id：'+'<input type="text" value="'+obj.data.id+'">',
                });
            }else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    //obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    //layer.close(index);
                    //向服务端发送删除指令
                    $.ajax({
                        url: "{:url('nav/del')}",
                        type: "POST",
                        // 获取到obj对象里面data里得id做为删除得条件
                        data: {id:obj.data.id},
                        success: function (msg)
                        { if (msg.code == 1) {
                            //删除这一行
                            //console.log(msg);
                            obj.del();
                            //关闭弹框
                            layer.msg("删除成功", {icon: 6});
                            layer.close(index);
                        } else {
                            layer.msg("删除失败", {icon: 5}); }
                        }
                    });
                    return false;
                });
            } else if(layEvent === 'edit'){ //编辑
                //do something
                //同步更新缓存对应的值
                layer.open({
                    type:2,
                    // 弹出样式
                    anim:1,
                    // 样式类名
                    skin:'layui-layer-molv',
                    // 标题信息
                    title:'修改数据',

                    area:['800px','650px'],
                    content:"{:url('nav/update')}"+"?id="+obj.data.id,
                    btn:'关闭窗口',
                })
            }
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            var ids = "";
            for(var i = 0;i < data.length;i++)
            {
                ids += data[i].id+',';
            }
            switch(obj.event){
                case 'add':
                    layer.open({
                        // 弹出层类型
                        type: 2,
                        // 弹出样式
                        anim: 1,
                        // 样式类名
                        skin:'layui-layer-molv',
                        // 标题信息
                        title:'添加数据',
                        // 宽高
                        area:['800px','670px'],
                        // 接口地址and参数
                        content: '{:url("nav/add")}',
                        // 关闭窗口
                        btn :'关闭窗口',
                    });
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.open({
                            // 弹出层类型
                            type: 2,
                            // 弹出样式
                            anim:1,
                            // 样式类名
                            skin:'layui-layer-molv',
                            // 标题信息
                            title:'修改数据',
                            // 宽高
                            area:['800px','690px'],
                            // 接口地址and参数
                            content:"{:url('nav/update')}"+"?id="+data[0]['id'],
                            btn:'关闭窗口',
                        });
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.confirm('真的删除么', function(index){
                            $.ajax({
                                url: "{:url('nav/delAll')}",
                                type: "POST",
                                // 获取到obj对象里面data里得id做为删除得条件
                                data: "id="+ids,
                                success: function (msg) {
                                    if (msg.code == 1) {
                                        //关闭弹框
                                        $(".layui-form-checked").each(
                                            function(){
                                                $(this).parents("tr").remove();
                                            }
                                        );
                                        layer.msg("删除成功", {icon: 6});
                                        layer.close(index);
                                    } else {
                                        layer.msg("删除失败", {icon: 5}); }
                                }
                            });
                            return false;
                        });
                    }
                    break;
            }
        });
    });
</script>
{include file="layout/footer" /}